<template>
  <!--登录和注册部分-->
  <div>
    <div class="loginDiv">
      <div id="loginBack">
        <!--
                <img id="backlogo" src="images/login_bg_01.png"/>
                -->
      </div>
      <div class="loginForm">
        <el-tabs type="card" v-model="activeName">
          <el-tab-pane label="用户登录" name="userlogin">
            <el-form ref="form" label-width="100px">
              <el-form-item label="用户名">
                <el-input
                  v-model="user.nickname"
                  placeholder="请输入注册手机/邮箱/账号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  v-model="user.password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <img :src="vercode" @click="newVerCode" />
              </el-form-item>
              <el-form-item label="验证码">
                <el-input
                  v-model="user.code"
                  placeholder="点击图片刷新验证码"
                ></el-input>
              </el-form-item>

              <el-form-item label="" style="margin-bottom: 0px">
                记住我
                <el-switch active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
              <el-form-item label="">
                <el-button
                  @click="submitLogin()"
                  style="width: 80%; display: block"
                  type="primary"
                  plain
                  >登录
                </el-button>
              </el-form-item>
            </el-form>0
          </el-tab-pane>
          <el-tab-pane label="用户注册" name="userreg">
            <el-form ref="userForm" :model="params" label-width="100px">
              <el-form-item
                label="用户名"
                prop="nickname"
                :rules="[
                  {
                    required: true,
                    message: '请输入你的昵称',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="params.nickname"
                  placeholder="请输入您的昵称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="手机号"
                prop="mobile"
                :rules="[
                  {
                    required: true,
                    message: '请输入手机号码',
                    trigger: 'blur',
                  },
                  { validator: checkPhone, trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="params.mobile"
                  placeholder="请输入您的手机号"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button @click="getCodeFun()" :value="codeTest">{{
                  codeTest
                }}</el-button>
              </el-form-item>
              <el-form-item
                label="密码"
                prop="password"
                :rules="[
                  { required: true, message: '请输入密码', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="params.password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item
                label="验证码"
                prop="code"
                :rules="[
                  { required: true, message: '请输入验证码', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="params.code"
                  placeholder="请输入验证码"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button
                  style="width: 80%; display: block"
                  type="success"
                  value="注册"
                  @click="submitRegister()"
                  plain
                  >注册
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import cookie from "js-cookie";
import loginApi from "@/api/login";
import registerApi from "@/api/register";
export default {
  layout: "default",
  data() {
    return {
      activeName: "userlogin",
      user: {
        nickname: "",
        password: "",
        code: "",
      },
      vercode: "",
      params: {
        mobile: "",
        code: "",
        nickname: "",
        password: "",
      },
      sending: true, //是否发送验证码
      second: 60, //倒计时间
      codeTest: "获取验证码",
      loginInfo: {},
    };
  },
  created() {},
  methods: {
    // 刷新验证码
    newVerCode() {
      this.vercode="http://127.0.0.1:8222/kaptcha?m="+Math.random();
    },
    // 登录方法
    submitLogin() {
      loginApi.submitLoginUser(this.user).then((response) => {
        if (response.ok) {
          this.loginInfo = JSON.stringify(response.data);
          cookie.set("startup", this.loginInfo, { domain: "localhost" });
          //跳转页面
          window.location.href = "/";
        }
      });
    },
    // 注册方法
    submitRegister() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          registerApi.submitRegisterUser(this.params).then((response) => {
            //提示注册成功
            this.$message({
              type: "success",
              message: "注册成功",
            });
            // 路由跳转到登录页
            this.$router.push({ path: "/" });
          });
        }
      });
    },
    // 通过输入手机号 发送验证码
    getCodeFun() {
      //sending = false
      //this.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
      if (!this.sending) return;
      // prop 换成你想监听的prop字段
      this.$refs.userForm.validateField("mobile", (errMsg) => {
        if (errMsg == "") {
          registerApi.getMobile(this.params.mobile).then((response) => {
            // 禁用发送验证码按钮
            this.sending = false;
            // 调用 倒计时的方法
            this.timeDown();
          });
        }
      });
    },
    // 验证码倒计时
    timeDown() {
      let result = setInterval(() => {
        --this.second;
        this.codeTest = this.second;
        if (this.second < 1) {
          clearInterval(result);
          this.sending = true;
          //this.disabled = false;
          this.second = 60;
          this.codeTest = "获取验证码";
        }
      }, 2000);
    },
    checkPhone(rule, value, callback) {
      //debugger
      if (!/^1[34578]\d{9}$/.test(value)) {
        return callback(new Error("手机号码格式不正确"));
      }
      return callback();
    },
  },
  mounted() {
    this.newVerCode();
  },
};
</script>
<style>
.loginDiv {
  width: 100%;
  height: 512px;
  margin: 0px auto;
  background: lightblue;
  background: url("~/assets/images/login_bg_01.png");
  display: flex;
  justify-content: space-around;
}

#backlogo {
  margin: 40px 0 0 0px;
}

.loginForm {
  margin: 20px;
  background: #ffffff;
  width: 480px;
  border-radius: 0px;
}

.el-tabs {
  background: #ffffff;
}

.el-tab-pane {
  background: #ffffff;
}

.el-input {
  width: 280px;
}
</style>